<template>
  <BasicModal @register="register" :title="title" @ok="handleSubmit" width="30%">
    <template #title>
      {{ title }}
    </template>

    <div v-if="title == '订单紧急状态'" style="color: #1890ff"> 修改后状态： </div>
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'OrderStatusModal',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { changeStatus } from '/@/api/m8/order/order';

  const emit = defineEmits(['success', 'register']);
  const { showMessage } = useMessage();
  let title = ref<string>('');
  let value = ref<any>();

  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    value.value = data.selIds;
    title.value = data.title;
    await resetFields();
    let inputFormSchemas: FormSchema[] = [];
    inputFormSchemas = [
      {
        label: '',
        field: 'jjlevel',
        component: 'RadioGroup',
        componentProps: {
          dictType: 'M8_order_level',
        },
        required: true,
      },
    ];
    setProps({
      labelWidth: 120,
      schemas: inputFormSchemas,
      baseColProps: { lg: 24, md: 24 },
    });
  });

  async function handleSubmit() {
    try {
      const data = await validate();
      setModalProps({ confirmLoading: true });
      const params: any = {
        selIds: value.value,
        jjlevel: data.jjlevel,
      };
      const res = await changeStatus(params);
      showMessage(res.message);
      setTimeout(closeModal);
      emit('success', '');
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage('您填写的信息有误，请根据提示修正。');
      }
      console.log('error', error);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  const [registerForm, { resetFields, validate, setProps }] = useForm();
</script>
<style scoped>
  .ant-picker {
    width: 80%;
  }
</style>
